<template>
  <block v-if="isShow" ref="block" height="570px">
    <div class="block-content">
      <v-chart ref="echarts" :options="options" :style="styles" />
    </div>
  </block>
</template>

<script>
import echarts from 'echarts'
import 'echarts/lib/chart/map'
// import 'echarts/map/js/world'
import { Block } from './index'
import { mapOptionFn } from '../config'

export default {
  name: 'OperationCityBlock',
  components: { Block },
  data() {
    return {
      screenWidth: document.body.clientWidth,
      isShow: true,

      styles: {
        width: '100%',
        height: '100%'
      },

      geoCoordMap: {
        合肥: [117.27, 31.86],
        武汉: [114.31, 30.52]
      },
      mapData: [
        { name: '合肥', value: [117.27, 31.86, 100] },
        { name: '武汉', value: [114.31, 30.52, 100] }
      ],
      options: {}
    }
  },
  watch: {
    screenWidth() {
      this.isShow = false
      this.$nextTick(() => {
        this.isShow = true
      })
    }
  },
  created() {
    this.options = mapOptionFn(this.mapData)
    const worldJson = require('echarts/map/json/world.json')
    echarts.registerMap('world', worldJson)
  },
  mounted() {
    this.$nextTick(() => {
      window.onresize = () => {
        return (() => {
          this.screenWidth = document.body.clientWidth
        })()
      }
    })
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.block-content {
  padding: 0 !important;
  width: 100%;
  height: 100%;
}
</style>
